import dayjs from "dayjs";
import moment from "moment";
import { defineComponent, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import styles from "./enterprise.module.less";

export default defineComponent({
  setup() {
    const state = ref({
      last_day: null,  //最后一天
      days: null,    //剩余天数
      insurance_start_date: '',   //保险起止日期
      during_start: null, //营业执照
      during_end: null,
      is_indefinitely: true,
      company_name: null,
      permit_code: null,
      code: null,
      province: null,
      city: null,
      dist: null,
      address: null,
      usual_zip_code: null,
      is_information: true,
    } as any)

    //获取时间
    const getDate = () => {
      let nowTime = new Date();
      let YYYY = nowTime.getFullYear();
      state.value.last_day = YYYY + '-' + '12' + '-' + '31';
      state.value.insurance_start_date = dayjs().format();
      state.value.days = Math.ceil(Math.abs(new Date(state.value.last_day).getTime() - new Date(state.value.insurance_start_date).getTime()) / (24 * 60 * 60 * 1000));
      console.log(state.value.insurance_start_date);
    }

    onMounted(() => {
      getDate()
    });
    const during_date = () => {
      state.value.days = Math.ceil(Math.abs(new Date(state.value.last_day).getTime() - new Date(state.value.insurance_start_date).getTime()) / (24 * 60 * 60 * 1000));
    }
    //确认
    const confirm = () => {
      console.log(state.value.insurance_start_date)
    }

    const Main = () => (
      <div class={styles.container}>
        <div class={styles['form-box']}>
          <a-form model={state.value} label-col={{ style: { width: '150px', lineHeight: '40px' } }}>
            <a-form-item
              label="保险起止日期"
              name="date"
            >
              <a-date-picker v-model:value={state.value.insurance_start_date} style={{ width: '220px', height: '40px' }} valueFormat="YYYY-MM-DD" change={during_date()} />
              <span> - {state.value.last_day}共<span class={styles.days}>{state.value.days}</span>天</span>
            </a-form-item>
            <div class={styles.tips}>
              <p>当天<span>0</span>时起</p>
              <p>当天<span>23:59:59</span>时止</p>
            </div>
            <a-form-item
              label="营业执照"
              required
            >
              <a-date-picker v-model:value={state.value.during_start} style={{ width: '200px', height: '40px' }} />
              <span style={{ margin: '0 3px' }}>至</span>
              <a-date-picker v-model:value={state.value.during_end} style={{ width: '200px', height: '40px' }} placeholder='截至日期' />
              <a-checkbox style={{ marginLeft: '5px' }} v-model:checked={state.value.is_indefinitely}>无期限</a-checkbox>
            </a-form-item>
            <a-form-item
              label='旅行社名称'
              required
            >
              <a-input style={{ width: '380px', height: '40px' }} v-model:value={state.value.company_name} />
            </a-form-item>
            <a-form-item
              label='业务许可证编号'
              required
            >
              <a-input style={{ width: '380px', height: '40px' }} v-model:value={state.value.permit_code} />
            </a-form-item>
            <a-form-item
              label='统一社会信用代码'
              required
            >
              <a-input style={{ width: '380px', height: '40px' }} v-model:value={state.value.code} />
            </a-form-item>
            <a-form-item
              label='通信地址'
              required
            >
              <div class={styles.dists}>
                <div class={styles['dists-item-box']}>
                  <a-select class={styles['dists-item']} v-model:value={state.value.province}>
                    <a-select-option value="浙江省">浙江省</a-select-option>
                    <a-select-option value="江苏省">江苏省</a-select-option>
                    <a-select-option value="安徽省">安徽省</a-select-option>
                  </a-select>
                </div>
                <div class={styles['dists-item-box']}>
                  <a-select class={styles['dists-item']} v-model:value={state.value.city}>
                    <a-select-option value="宁波市">宁波市</a-select-option>
                    <a-select-option value="温州市">温州市</a-select-option>
                    <a-select-option value="杭州市">杭州市</a-select-option>
                  </a-select>
                </div>
                <div class={styles['dists-item-box']}>
                  <a-select class={styles['dists-item']} v-model:value={state.value.dist}>
                    <a-select-option value="海曙区">海曙区</a-select-option>
                    <a-select-option value="鄞州区">鄞州区</a-select-option>
                    <a-select-option value="镇海区">镇海区</a-select-option>
                  </a-select>
                </div>
              </div>
            </a-form-item>
            <a-form-item>
              <a-input style={{ width: '660px', height: '40px', marginLeft: '150px' }} v-model:value={state.value.address} />
            </a-form-item>
            <a-form-item
              label='邮政编码'
              required
            >
              <a-input style={{ width: '380px', height: '40px' }} v-model:value={state.value.usual_zip_code} />
            </a-form-item>
            <a-form-item>
              <a-checkbox style={{ marginLeft: '150px' }} v-model:checked={state.value.is_information}>
                <span class={styles.f1}>同步修改企业信息</span>
              </a-checkbox>
            </a-form-item>
          </a-form>
          <div class={styles.btn} onClick={() => { confirm() }}>确认</div>
        </div>
      </div>
    )

    return () => (
      <div class={styles.enterprise}>
        <div class={styles['header-box']}>企业信息变更</div>
        <Main />
      </div>
    )
  }
})